<template>
    <input type="text" class="form__input" :value="value" @input="SetValue" placeholder="请鱼油输入" @click="ChangeMes" />
</template>
<script>
import { toRefs } from 'vue';
export default {
    setup(props, context) {
        const { value } = toRefs(props);
        const SetValue = e => {
            context.emit('update:value', e.target.value);
        };
        return { value, SetValue };
    },
};
</script>
<style lang="less">
/*  FORM  */
.form__input {
    width: 20.4rem;
    height: 4rem;
    border: none;
    border-radius: 1rem;
    font-size: 1.4rem;
    padding-left: 1.4rem;
    box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white);
    background: none;
    font-family: inherit;
    color: var(--greyDark);
}

.form__input::-moz-placeholder {
    color: var(--greyLight-3);
}

.form__input:-ms-input-placeholder {
    color: var(--greyLight-3);
}

.form__input::placeholder {
    color: var(--greyLight-3);
}

.form__input:focus {
    outline: none;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white);
}
</style>
